<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>p10_固定定位遮罩物</title>

    <style>
        .mark{
            background-color: rgba(0,0,0,.3);
            /* 固定定位以html视口(view port)为参照物，紧贴四个边，实现撑满全屏的效果 */
            position: fixed;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
        }

    </style>

</head>
<body>

<div class="mark"></div>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt doloremque, est laboriosam repellendus
    repudiandae tempore? Assumenda deserunt distinctio itaque minus, nisi, odit porro repellendus sequi similique
    tenetur veritatis voluptate voluptatum.
</div>
<div>Accusamus aperiam asperiores consectetur ipsa ipsam itaque non obcaecati odio perspiciatis quibusdam sed tempore,
    vero! Consectetur eligendi fuga hic, impedit inventore modi molestias nobis, perspiciatis repellendus reprehenderit
    similique tempore temporibus.
</div>
<div>Animi, distinctio dolore enim harum magni minima, minus nam nisi perspiciatis possimus, sequi voluptates? Amet
    animi architecto dicta eos excepturi, itaque natus omnis optio quia quisquam rem, similique, soluta voluptate.
</div>
<div>Corporis cumque enim esse iusto molestiae, odit perspiciatis possimus repudiandae sapiente! Accusamus consequuntur
    doloribus eius eligendi, esse et facilis harum ipsam iste nesciunt, officia omnis quisquam repellendus
    reprehenderit, rerum tempore?
</div>
<div>Ab amet architecto consequuntur corporis culpa debitis eius eligendi, esse est iste labore, magnam maiores nam nemo
    nihil possimus quam quas quia quisquam quod reprehenderit, sequi tenetur ullam voluptate voluptatum!
</div>
<div>Ea magnam mollitia quisquam repudiandae. Eveniet, ex non? Exercitationem minima nulla quasi? Ab autem dolores et
    fugiat illo, maiores necessitatibus nulla quaerat, quod reiciendis temporibus ut voluptates. Vero, voluptas,
    voluptatum!
</div>
<div>Accusamus, fugiat, magnam. Aliquid expedita modi necessitatibus officia officiis quibusdam rerum soluta suscipit
    totam vel? Autem commodi cumque eos esse iste omnis qui, rerum voluptatum! Accusantium repellendus repudiandae
    tempora vel.
</div>
<div>Aperiam aut culpa cumque error eum eveniet ex explicabo, facilis ipsum labore laborum molestiae odio odit placeat
    praesentium quaerat, quasi quia quibusdam rem saepe sit ullam vitae voluptas voluptate voluptatum.
</div>
<div>Accusamus consectetur cumque dolorem doloremque eos esse explicabo in inventore, ipsam itaque laboriosam non quod
    recusandae saepe similique, vel veritatis. Ad commodi laudantium libero minus provident quas ratione rem unde.
</div>
<div>Ad beatae, blanditiis explicabo itaque quibusdam quis rerum sed sint tempora voluptatem? A aliquid atque eveniet
    molestiae necessitatibus perspiciatis quibusdam? Adipisci dignissimos eum inventore nisi non provident quos
    repellendus suscipit.
</div>
<div>Dignissimos ea enim esse, incidunt ipsa ipsum nisi nobis nostrum quo rerum? Autem cupiditate distinctio dolorem
    harum id, laboriosam modi, nam nostrum quibusdam quidem ratione rem repellendus sapiente sed voluptate.
</div>
<div>A distinctio ex hic magnam nobis perferendis unde vel velit! A amet consectetur, dignissimos distinctio dolorum
    enim eveniet fugiat fugit hic minus nesciunt repellendus totam vel! Amet aut cumque labore!
</div>
<div>Amet aperiam asperiores dolore eligendi fugit harum molestias nihil recusandae similique vero! Ad architecto
    distinctio, enim et incidunt ipsam itaque laboriosam optio perspiciatis placeat quod sequi soluta ut veritatis
    voluptatum.
</div>
<div>Ad aliquam, beatae blanditiis corporis ea et eveniet ex molestiae neque officia possimus, provident, quam veritatis
    vitae voluptate. Animi aperiam beatae consectetur error laboriosam magni odit officiis repellat repudiandae saepe.
</div>
<div>Assumenda corporis cumque cupiditate doloribus, ducimus earum enim exercitationem expedita ipsam itaque iure minima
    molestias mollitia nemo, nesciunt nihil, omnis optio placeat praesentium quas quo sequi sit sunt vel voluptatibus?
</div>
<div>Architecto asperiores debitis dicta dolor earum est ex expedita, fugit iure iusto labore molestias nam
    necessitatibus neque quae sit tempora! Accusamus cupiditate doloribus eius excepturi illum ipsa non! Neque, unde?
</div>
<div>Animi at ducimus id inventore nesciunt odio quaerat quidem tempore temporibus, voluptatum. Blanditiis commodi
    consequatur cumque, deserunt doloremque earum excepturi facere harum impedit ipsa omnis optio recusandae rem sit
    tempore?
</div>
<div>Commodi in minus tempore. Dolore eligendi enim magnam nam neque porro possimus saepe soluta velit. Accusamus
    consequatur, corporis dignissimos impedit magni maiores necessitatibus numquam placeat quis repellat, soluta
    temporibus voluptatem?
</div>
<div>Cumque dolore doloribus ex exercitationem harum inventore quaerat quis vero! Ab, dignissimos ducimus in magnam
    molestiae quidem reiciendis totam! Accusamus animi dolor dolores laudantium maxime, quas sed veniam voluptatem
    voluptatum.
</div>
<div>Ab ad architecto consectetur corporis dicta doloremque ducimus eaque eius esse excepturi exercitationem expedita
    facere fugit hic incidunt ipsa iusto minima odit perferendis quas quo sed sunt unde, veritatis voluptas.
</div>
<div>Accusantium aliquam architecto asperiores assumenda consectetur cumque cupiditate, eligendi eum fugiat ipsam
    laboriosam laudantium magni, maiores minus mollitia non odit quae quaerat qui sint soluta tempore vero! Distinctio,
    iure quas?
</div>
<div>Animi aperiam consequuntur delectus dicta dignissimos ducimus ex exercitationem facere fugit, hic ipsam labore
    molestias nobis numquam optio perspiciatis repellat reprehenderit sapiente vel velit? Aliquam molestiae numquam quia
    ratione voluptas.
</div>
<div>Cupiditate ea esse eum illum iste magni minus nesciunt odio porro sunt? Dolor ducimus harum, in odit quam rerum vel
    voluptates. Accusamus animi, delectus ex ipsa libero recusandae suscipit voluptas?
</div>
<div>Ex nam rerum voluptatibus? Accusantium debitis dolore itaque praesentium quia sunt totam veniam, voluptatum?
    Consequatur cum ipsam maiores minima necessitatibus, possimus tempora ullam. Alias dolor et, inventore odio rerum
    voluptatibus!
</div>
<div>Architecto corporis cum dolor dolores hic iusto laboriosam magni nam obcaecati pariatur, quae quibusdam repudiandae
    sint tenetur ullam. Autem blanditiis consequuntur ducimus eligendi itaque maiores nihil perspiciatis quam ratione
    voluptates?
</div>
<div>Accusamus ad consectetur cupiditate dolore, eius est molestiae sequi! Ad blanditiis doloribus eaque eum ipsa itaque
    odio rerum? Accusamus aliquam cum deserunt dolores impedit, nihil officia reiciendis sequi ut voluptatibus.
</div>
<div>Alias consequuntur, dolorem dolores dolorum, exercitationem id illum ipsam laudantium molestiae nihil perferendis
    quasi quisquam, repellat sapiente sequi similique ut. Beatae dolor dolorem facere mollitia nesciunt sit tempora
    velit voluptatum!
</div>
<div>Aspernatur atque ducimus fuga fugiat, praesentium quae sit voluptas! A accusantium beatae commodi dolorem eaque
    eius error, eveniet facilis inventore iure laboriosam magnam molestiae nostrum, perferendis quis sed tempora
    voluptate?
</div>
<div>Consectetur explicabo impedit minima ratione ullam velit! Distinctio error est ex, ipsa nihil perspiciatis
    repellendus saepe. Accusamus, animi error est incidunt, non nostrum placeat quae quaerat unde velit vero
    voluptatibus?
</div>
<div>At atque eligendi et minima non rerum ullam veritatis? Aliquid aspernatur eaque expedita ipsam itaque nulla
    obcaecati odio optio quibusdam veritatis. Aliquid amet, dolorum facilis impedit ipsum molestias reprehenderit sit?
</div>

</body>
</html>